<template>
  <div class="page suspend1">
    <div class="bar">
      <a href="#">Touch</a>
      <a href="#">Touch</a>
      <a href="#">Touch</a>
      <a href="#">Touch</a>
      <a href="#">Touch</a>
    </div>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.suspend1 {
  .bar {
    margin: 50px auto;
    width: 600px;
    height: 40px;
    display: flex;
    justify-content: space-between;
  }
  .bar:hover a {
    filter: blur(3px);
  }
  .bar a {
    position: relative;
    width: 100px;
    line-height: 40px;
    text-align: center;
    color: skyblue;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter .3s ease;
    overflow: hidden;
  }
  .bar a:before {
    content: 'Touch';
    position: absolute;
    width: 100px;
    height: 0;
    left: 0;
    background-color: skyblue;
    transition: .1s ease;
    overflow: hidden;
  }
  .bar a:hover {
    filter: blur(0);
  }
  .bar a:hover:before {
    height: 40px;
    font-size: 20px;
    font-weight: 600;
    color: white;
  }
}
</style>